<template>
    <div class="artleft">
        <div class="div-card card4">
            <el-card class="box-card" :body-style="{ padding: '6px' }">
                <div class="card4-content">                     
                    <a href="#">
                        <img :src="head_pic" class="card4-img">
                    </a>
                    
                    <div class="card4-header">
                        <a href="#">{{user_name}}</a> 
                    </div>
                    <div class="card4-meta">
                        <div class="card4-meta-desc">只是一条咸鱼罢了一条咸鱼一条咸鱼一条咸鱼一条咸鱼</div>
                    </div>
                </div> 
                <div class="card4-main">
                    <div class="card4-main-ul">
                        <div class="card4-ul-li">
                            <div class="card4-li-label">文章</div>
                            <div class="card4-li-value">5</div>
                        </div>

                        <div class="card4-ul-li">
                            <div class="card4-li-label">粉丝</div>
                            <div class="card4-li-value">15</div>
                        </div>

                        <div class="card4-ul-li">
                            <div class="card4-li-label">喜欢</div>
                            <div class="card4-li-value">250</div>
                        </div>

                        <div class="card4-ul-li">
                            <div class="card4-li-label">收藏</div>
                            <div class="card4-li-value">3500</div>
                        </div>

                    </div>
                </div>

                <div class="card4-main2">
                    <div class="card4-main2-ul2">
                        <div class="card4-ul2-li2">
                            <div class="card4-li2-label">排名：</div>
                            <div class="card4-li2-value">12345</div>
                        </div>
                        <div class="card4-ul2-li2">
                            <div class="card4-li2-label">访问：</div>
                            <div class="card4-li2-value">9999+</div>
                        </div>

                    </div>
                </div>

                <div class="card4-footer">
                    <div class="card4-footer-content" style="font-size:0">
                        <button class="card4-footer-button but">
                            <i class="fa fa-plus" aria-hidden="true"></i>
                            <span class="footer-state">关注</span>
                        </button>

                        <button class="card4-footer-button but2">
                            <i class="fa fa-envelope" aria-hidden="true"></i>
                            <span class="footer-state">私信</span>
                        </button>                                                  
                    </div>           
                </div>     
            </el-card>
        </div>

        <div class="card5">
            <el-card class="box-card">
                <div slot="header" class="clearfix card5">
                    <span class="ml-5">文章归档</span>
                    <el-tooltip content="所有文章" placement="top" effect="light" class="card5-tip">
                        <i class="fa fa-newspaper-o" aria-hidden="true"></i>
                    </el-tooltip>
                </div>
                <div class="card5-content">
                    <div class="card5-ul">
                        <a href="" class="card5-li">
                            <span class="li-sp1">2021 年 4月</span>
                            <span class="li-sp2">1篇</span>
                        </a>
                        <a href="" class="card5-li">
                            <span class="li-sp1">2021 年 3月</span>
                            <span class="li-sp2">10篇</span>
                        </a>
                        <a href="" class="card5-li">
                            <span class="li-sp1">2021 年 2月</span>
                            <span class="li-sp2">100篇</span>
                        </a>
                        <a href="" class="card5-li">
                            <span class="li-sp1">2021 年 1月</span>
                            <span class="li-sp2">1000篇</span>
                        </a>
                    </div>
                </div>             
            </el-card>
        </div>

        <div class="card6">
            <el-card class="box-card">
                <div class="card6-content">
                    <el-tabs v-model="activeName" @tab-click="handleClick">
                        <el-tab-pane label="最新文章" name="first">
                            <div class="card6-ul">
                                <div class="card6-li">
                                    <el-tag type="info">一天前</el-tag>
                                    <span class="card6-sp">你知道Laravel 用到了哪些设计模式 ？都是如何用的</span>
                                </div>
                                <div class="card6-li">
                                    <el-tag type="info">一周前</el-tag>
                                    <span class="card6-sp">你知道Laravel 用到了哪些设计模式 ？都是如何用的</span>
                                </div>

                                <div class="card6-li">
                                    <el-tag type="info">一月前</el-tag>
                                    <span class="card6-sp">你知道Laravel 用到了哪些设计模式 ？都是如何用的</span>
                                </div>

                                <div class="card6-li">
                                    <el-tag type="info">一年前</el-tag>
                                    <span class="card6-sp">你知道Laravel 用到了哪些设计模式 ？都是如何用的</span>
                                </div>

                                <div class="card6-li">
                                    <el-tag type="info">一世纪前</el-tag>
                                    <span class="card6-sp">你知道Laravel 用到了哪些设计模式 ？都是如何用的</span>
                                </div>
                            </div>
                        </el-tab-pane>
                        
                        <el-tab-pane label="最受欢迎" name="second">
                            <div class="card6-ul">
                                <div class="card6-li">
                                    <el-tag type="info">
                                        <i class="el-icon-trophy" style="line-height:0;font-weight:600;"></i>
                                        <span>15</span>
                                    </el-tag>
                                    <span class="card6-sp">你知道Laravel 用到了哪些设计模式 ？都是如何用的</span>
                                </div>
                                <div class="card6-li">
                                    <el-tag type="info">
                                        <i class="el-icon-trophy" style="line-height:0;font-weight:600;"></i>
                                        <span>9999+</span>
                                    </el-tag>
                                    <span class="card6-sp">你知道Laravel 用到了哪些设计模式 ？都是如何用的</span>
                                </div>
                            </div>
                        </el-tab-pane>
                    </el-tabs>
                </div>
            </el-card>
        </div>

        <div class="card7">
            <el-card class="box-card">
                <div class="card7-header">
                    <div class="card7-header-title">
                        <span>标签云</span>
                    </div>
                </div>

                <div class="card7-content">
                    <div class="tag-group">
                        <el-tag
                            v-for="item in items"
                            :key="item.label"
                            :type="item.type"
                            @click.native="test(item.label)"
                            effect="dark">
                            {{ item.label }}
                        </el-tag>
                    </div>                               
                </div>
            </el-card>
        </div>


        
    </div>
</template>
<script>
export default {
    data(){
        return{
            user_name: window.user.name,
            head_pic: window.user.head_pic,

            activeName: 'first',
            items: [
                { type: '', label: 'laravel' },
                { type: 'success', label: 'php',click:'test' },
                { type: 'info', label: 'python' },
                { type: 'danger', label: 'java' },
                { type: 'warning', label: '依赖注入' }
            ],
            
        }
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      },
      test(val){
          alert(val);
      },
    },
}
</script>

<style>

    .artleft{
        min-width:220px;
    }

/******* card4 start *******************/
    .card4{
        width:100%;
        margin-bottom: 10px;
    }
    .card4-content{
        padding:1em;
    }
    .card4-img{
        float:right;
        margin-left: 1em;
        width:45px;
        height:45px;
        border-radius: 50%; 
        -o-border-radius: 50%;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;

    }
    .card4-header{
        font-weight: bold;
        font-size: 15px;
        line-height: 28px;
        margin-bottom: 5px;
    }
    .card4-meta{
        font-size: 13px;
    }
    .card4-meta-desc{
        color:rgba(0,0,0,.4);
    }
    .card4-main{
        border-top: 1px solid #EBEEF5;
        border-bottom :1px solid #EBEEF5;
        padding:15px 0;
    }
    .card4-main-ul{
        margin:0 0 -2em;
    }
    .card4-ul-li{
        min-width:23%;
        margin:0 0 2em;
        display:inline-flex;
        flex:0 1 auto;
        flex-direction: column;
        text-align: center;
    }
    .card4-li-label{
        font-size: 14px;
        font-weight: normal;
        color:#888c8e;
    }
    .card4-li-value{
        padding-top:5px;
        font-size: 13px;
        font-weight: bold;
        color:#888c8e;
    }

    .card4-main2{
        border-bottom :1px solid #EBEEF5;
        padding:15px 0;
    }
    .card4-main2-ul2{
        margin:0 0 -2em;
    }
    .card4-ul2-li2{
        min-width:48%;
        margin:0 0 2em;
        display:inline-flex;
        flex:0 1 auto;
        flex-direction: column;
        text-align: center;
    }
    .card4-li2-label{
        font-size: 14px;
        font-weight: normal;
        color:#888c8e;
    }
    .card4-li2-value{
        padding-top:5px;
        font-size: 13px;
        font-weight: bold;
        color:#888c8e;
    }

    .card4-footer{
        padding:20px;

    }
    .card4-footer-content{
        width:100%;
        
    }
    .card4-footer-button{    
        width:50%;
        cursor: pointer;
        border:1px solid rgba(34,36,38,.15);
        background: transparent none!important;
        color: rgba(0,0,0,.6)!important;
        padding:5px 10px;
    }
    .but{
        border-top-left-radius: .28571429rem;
        border-bottom-left-radius: .28571429rem;
    }
    
    .but2{
        border-left: none;
        border-top-right-radius: .28571429rem;
        border-bottom-right-radius: .28571429rem;
        
    }

    .but:hover{
        border:1px solid orange;
        
    }
    .but2:hover{
        border:1px solid orange;
    }

    .footer-state{
        font-size: 1rem;
        font-weight: normal;
        color:#888c8e; 
    }


/******* card4 stop *******************/

/******* card5 start  *******************/
    .card5{
        margin:10px 0;
        width:100%;
    }
    .card5 .el-card__header {
        padding: 1px 20px;
        color:#888c8e;
    }
    
    .card5-tip{
        float:right;
        margin-top:-8px;
        margin-right:20px;
        
    }
    .card5-li{
        font-size:13px;
        display: block;
        color:#888c8e;
        line-height: 25px;

    }

    .li-sp2{
        float:right;
        margin-right:20px;
    }
    .card5-li:hover .li-sp1{
        color:#4183c4;
        text-decoration:underline;
    }

    .card5-li:hover .li-sp2{
        color:#4183c4;
    }

/******* card5 stop  *******************/

/******* card6 start  *******************/
    .card6 .el-card__body {
        padding: 1px 20px;
        color:#888c8e;
    }

    .el-tabs__item {
        color:#888c8e;
    }
    .card6-li{
        padding:8px 0;
        line-height: 26px;
        font-size:13px;
    }
    .card6-li .el-tag{
        height:26px;
        line-height: 26px;
        font-weight: bold;
        color: rgba(0,0,0,.6);
        background-color: #e8e8e8;
    }

    .card6-li:hover .card6-sp{
        color:#4183c4;
        text-decoration:underline;
    }

/******* card6 stop  *******************/

/******* card7 start  *******************/
    .card7{
            margin:10px 0;
            width:100%;
        }
    .card7 .el-card__body {
        padding: 0px;
    }
    .card7-header{
        border-bottom: 1px solid #EBEEF5;
    }
    .card7-header-title{
        color:#888c8e;
        padding:10px 20px;
    }
    .card7-content{
        padding:5px 20px;
    }
    .el-tag{
       margin:5px;
       cursor: pointer; 
    }

/******* card7 stop  *******************/
    
</style>